<#assign menuId=3>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>创建打样订单-${Application.systemName!}</title
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
        <!--datetimerpicker-->
        <link rel="stylesheet" type="text/css" href="../css/datetimepicker/bootstrap-datetimepicker.min.css"/>
        <!-- bootstrap wysihtml5 - text editor -->
        <link href="../css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
        <link href="../css/myself.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
			    vertical-align: middle;
			}
            .pull-left{
				border-left: 6px solid #3882FF;
				padding: 0 0 0 10px;
				font-size: 14px;
				font-weight: bold;
			}
			.nother{
				border: 1px solid #ccc; 
				padding: 6px 30px;
			}
			.style label{
				width: 15%;
			}
            .well{
                padding: 0;
                border: none;
                margin: 0;
                border-radius: 0;
                box-shadow: none;
                -webkit-box-shadow: none;
                background-color: white;
            }
			.style label:nth-last-child{
				width: 5%;
			}
	        .table-bordered{
	        	border-collapse: collapse;
	        }
	       
	        a{
	        	cursor: pointer;
	        }
	        .row{
		        	padding: 0 0 0 10px;
		    }
		    
            .Design_draft img{
                width:240px;
                height: 135px;
                margin: auto;
            }
            .Design_draft{
                height: 210px;
                display: block;
            }
            .sum{vertical-align: middle;background: #ccc;padding: 0 20px;margin-bottom: 30px;}
            .sum p{line-height: 31px;margin: 0;}
            .sum p:first-child{font-size: 15px;font-weight: bold;}
            .sum p:last-child{padding-right: 10px;}
        </style>
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Left side column. contains the logo and sidebar -->
           <#include "../menu.html"/>
        	
           <aside class="right-side">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>创建打样订单</h1>
                    <hr style="margin: 10px 0 0 0" />
            	</section>
                <!-- Main content -->
                <section class="content">

                    <div class='row'>
                        <div class='col-md-12'>
                            <div class='box' style="padding: 20px;">
                                    <table class="table table-bordered center custormView" style="margin-top: 10px">
                                        <tr>
                                            <td style="text-align: center; width: 10%;"><label class="red">*</label>选择客户</td>
                                            <td colspan="3" width="90%">
                                            	<select id="customer" class="selectpicker show-tick form-control"  data-live-search="true">
                                            		<#if customerId??>
                                            		<option selected="selected" value="${customerId!}">${customerName}</option> 
                                            		<#else>
                                            		<option value="">请选择</option> 
							                        <#list customerList as customer>
							                        <option value="${customer.id!}">${customer.fullname!}</option> 
							                        </#list>
                                            		</#if>
							                    </select> 
                                            </td>
                                        </tr>
                                        <tr>
                                        	<td style="text-align:center;">
                                        		<label class="red">*</label>
                                        		打样截止时间
                                        	</td>
                                        	<td>
                                        		<div class="input-group date form_datetime col-md-10">
													<input class="form-control" size="60" type="text" id="proofingEndDate" value=""> 
													<span class="input-group-addon">
													<span class="glyphicon glyphicon-th"></span>
													</span>
												</div>
                                        	</td>
                                        	<td style="text-align: center;">大货截止时间</td>
                                        	<td>
                                        		<div class="input-group date form_datetime col-md-10">
													<input class="form-control" id="productionEndDate" size="60" type="text" value=""> 
													<span class="input-group-addon">
														<span class="glyphicon glyphicon-th"></span>
													</span>
												</div>
                                        	</td>
                                        </tr>
                                        <tr>
                                        	<td style="text-align: center;">客户需求</td>
                                        	<td colspan="3">
                                        		<div class="form-group textarea">
		                                            <textarea class="form-control" id="requirement" rows="3" placeholder="Enter ..."></textarea>
		                                        </div>
                                        	</td>
                                        </tr>
                                    </table>

						       	<div class="clearfix">
                                </div>
                                
                                
                                <form action="#" method="get" class="center">
						       		<div class="pull-left" style="margin: 10px 0; margin-top:15px">填写款式颜色数量</div>
						           	
						           	<table class="table text-center table-bordered"> 
						           		<#if sampleStoreList?size!=0>
						           		<#list sampleStoreList as sampleStore>
						           		<tr>
						           			<td width=20%" style="vertical-align: top;">
	                                            <span class="Design_draft"><img src="${Application.accessFileUrl!}${sampleStore.mainImage}" alt="" /></span>
	                                        </td>
	                                        <td width="20%" style="vertical-align: top;">
	                                        	<span hidden id="id">${sampleStore.id}</span>
	                                            <p>${sampleStore.code!}</p>
	                                            <p>${sampleStore.season!}/${sampleStore.sex!}/${sampleStore.category!}</p>
	                                            <#if sampleStore.style?size!=0>
	                                            <#list sampleStore.style as style>
	                                            ${style} 
	                                            </#list>
	                                            </#if>
	                                            </p>
	                                        </td>
					                       	<td style="vertical-align: top;width: 60%">
					                       		<table class="table table-bordered no-margin no-padding" >
					                       			<tr>
					                       				<th width="23%">颜色</th>
					                       				<th width="11%">XS</th>
					                       				<th width="11%">S</th>
					                       				<th width="11%">M</th>
					                       				<th width="11%">L</th>
					                       				<th width="11%">XL</th>
					                       				<th width="11%">总计</th>
					                       				<th width="10%"></th>
					                       			</tr>
					                       			<tr>
					                       				<td style="padding:0">
					                       					<input type="text"  style="width:100%; height:100%; border:0;"/>
					                       				</td>
					                       				<td style="padding:0">
					                       					<input type="text" name="size" style="width:100%; height:100%; border:0"/>
					                       				</td>
					                       				<td style="padding:0">
					                       					<input type="text" name="size" style="width:100%; height:100%; border:0"/>
					                       				</td>
					                       				<td style="padding:0">
					                       					<input type="text" name="size" style="width:100%; height:100%; border:0"/>
					                       				</td>
					                       				<td style="padding:0">
					                       					<input type="text" name="size" style="width:100%; height:100%; border:0"/>
					                       				</td>
					                       				<td style="padding:0">
					                       					<input type="text" name="size" style="width:100%; height:100%; border:0"/>
					                       				</td>
					                       				<td name="total">0</td>
					                       				<td>
					                       					<div class="red_circle delete" style="cursor: pointer;">
	                                   							<div>
	                                   								
	                                   							</div>
	                                   						</div>
					                       				</td>
					                       			</tr>
					                       			<tr class="no_add">
	                                   					<td colspan="8">
	                                   						<div class="add" style="cursor: pointer;">+添加一行</div>
	                                   					</td>
	                                       			</tr>
					                       			<tr>
					                       				<td colspan="8"  class="right-text">
		                                                    <span class="pull-right">共<span name="total">0</span>件</span>
		                                                </td>	
					                       			</tr>
					                       		</table>
					                       	</td>
						           		</tr>
						           		</#list>
						           		</#if>
						           	</table>
	                                <div class="sum clearfix well">
                                        <p class="fr">${sampleStoreList?size}款&nbsp;&nbsp;&nbsp;(<span id="count">0</span>件)</p>
                                        <p class="fr">共计</p>
	                                </div>
                                    <div class="clearfix">
                                        <a href="javascript:;" id="back"><div class="btn btn-default fl">上一步</div></a>
                                        <a href="javascript:;" id="add_proofing"><div class="btn btn-primary fr">确定创造</div></a>
                                    </div>
	                           </form>
                            </div>
						       	
						       	
                            </div><!-- /.box -->
                        </div><!-- /.col-->
                    </div><!-- ./row -->
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
        <!-- jQuery 2.0.2 -->
        <style type="text/css"></style>
        
        <!-- jQuery 2.0.2 -->
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>        
       
       	<script src="../js/plugins/datetimerpicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
       	<script src="../js/plugins/datetimerpicker/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
       	<script src="../js/order/proofingOrder_add.js" type="text/javascript"></script>
        <script type="text/javascript">
            
		$(function() {
			$('#productionEndDate').datetimepicker({
				format: 'yyyy-mm-dd hh:00',
		    	language:  'zh-CN',  
	            weekStart: 1,  
	            todayBtn:  1,  
	            autoclose: 1,  
	            todayHighlight: 1,  
	            startView: 2,  
	            forceParse: 0,
	            showMeridian: 0,
	            minView: 1,
	            startDate: new Date()
		    }).on("changeDate",function(ev){
		    	var productionEndDate = $('#productionEndDate').val();
		    	$('#proofingEndDate').datetimepicker('setEndDate',productionEndDate);
		    });
			$('#productionEndDate').next().click(function(){
		    	$('#productionEndDate').datetimepicker('show');
		    });
		    $('#proofingEndDate').datetimepicker({
		    	format: 'yyyy-mm-dd hh:00',
		    	language:  'zh-CN',  
	            weekStart: 1,  
	            todayBtn:  1,  
	            autoclose: 1,  
	            todayHighlight: 1,  
	            startView: 2,  
	            forceParse: 0,
	            showMeridian: 0,
	            minView: 1,
	            startDate: new Date()
		    }).on("changeDate",function(ev){
		    	var proofingEndDate = $('#proofingEndDate').val();
		    	$('#productionEndDate').datetimepicker('setStartDate',proofingEndDate);
		    });
		    $('#proofingEndDate').next().click(function(){
		    	$('#proofingEndDate').datetimepicker('show');
		    });
		});
			
			
			// 点击添加删除
			$('.add').click(function () {
				var tr=$('<tr><td style="padding:0"><input type="text" style="width:100%; height:100%; border:0;"/>'
       						+'</td><td style="padding:0"><input type="text" name="size" style="width:100%; height:100%; border:0"/></td>'
       						+'<td style="padding:0"><input type="text" name="size" style="width:100%; height:100%; border:0"/></td>'
       						+'<td style="padding:0"><input type="text" name="size" style="width:100%; height:100%; border:0"/></td>'
       						+'<td style="padding:0"><input type="text" name="size" style="width:100%; height:100%; border:0"/></td>'
       						+'<td style="padding:0"><input type="text" name="size" style="width:100%; height:100%; border:0"/></td>'
       						+'<td name="total">0</td>'
       						+'<td><div class="red_circle delete" style="cursor: pointer;"><div>	</div></div></td></tr>');
				$(this).parent().parent().before(tr);
				tr.find(".delete").click(deleteTr);
				tr.find('input[name="size"]').change(calculate);
			});
            
            function calculate(){
            	var count=$(this).val();
            	var inputs=$(this).parent().parent().find('input[name="size"]');
            	if(count&&isNaN(count)){
            		$(this).val('');
            		return alert('请输入数字');
            	}
            	var total=0;
            	for(var i=0;i<inputs.length;i++){
            		var num=inputs.eq(i).val();
            		if(num&&!isNaN(num)){
            			total+=parseInt(num);
            		}
            	}
            	$(this).parent().siblings('[name="total"]').html(total);
            	var table=$(this).parents('table').eq(0);
            	calculateTotal(table);
            }
            
            function deleteTr(){
            	var table=$(this).parents('table').eq(0);
                $(this).parent().parent().remove();
                calculateTotal(table);
            }
            
            function calculateTotal(table){
            	var tds=table.find('td[name="total"]');
            	var total=0;
                for(var i=0;i<tds.length;i++){
                	total+=parseInt(tds.eq(i).html());
                }
                table.find('span[name="total"]').html(total);
                var spans=$('span[name="total"]');
                total=0;
                for(var i=0;i<spans.length;i++){
                	total+=parseInt(spans.eq(i).html());
                }
                $('#count').html(total);
            }
            
            $(function(){
            	$(".delete").click(deleteTr);
            	$('input[name="size"]').change(calculate);
            	$('#back').click(function(){
            		if('${customerId!}'){
            			window.location.href='addSample?customerId=${customerId!}&customerName=${customerName!}&ids=${ids!}';
            		}else{
            			window.location.href='selectSample?ids=${ids!}';
            		}
            	});
            })
        </script>

    </body>
</html>

